<template>
	<el-card class="form-container" shadow="never">
		<el-steps :active="active" finish-status="success" align-center>
			<el-step title="填写商品信息"></el-step>
			<el-step title="填写商品促销"></el-step>
			<el-step title="填写商品属性"></el-step>
			<!-- <el-step title="选择商品关联"></el-step> -->
		</el-steps>
		<!-- 从子组件（既productInfoDetail组件）接收到nextStep参数时 执行nextStep函数-->
		<product-info-detail v-show="showStatus[0]" v-model="productParam" :is-edit="isEdit" @nextStep="nextStep"></product-info-detail>
		<product-sale-detail v-show="showStatus[1]" v-model="productParam" :is-edit="isEdit" @nextStep="nextStep" @prevStep="prevStep"></product-sale-detail>
		<product-attr-detail v-show="showStatus[2]" v-model="productParam" :is-edit="isEdit" @nextStep="nextStep" @prevStep="prevStep"
		 @finishCommit="finishCommit"></product-attr-detail>
		<!-- <product-relation-detail v-show="showStatus[3]" v-model="productParam" :is-edit="isEdit" @prevStep="prevStep"
		 @finishCommit="finishCommit">
    </product-relation-detail>-->
	</el-card>
</template>
<script>
	import ProductInfoDetail from "./ProductInfoDetail";
	import ProductSaleDetail from "./ProductSaleDetail";
	import ProductAttrDetail from "./ProductAttrDetail";
	import ProductRelationDetail from "./ProductRelationDetail";
	import {
		createProduct,
		getProduct,
		updateProduct
	} from "@/api/product";

	const defaultProductParam = {
		albumPics: "",
		brandId: null,
		brandName: "",
		deleteStatus: 0,
		description: "",
		tags: "",
		tagsArr: "",
		detailDesc: "",
		detailHtml: "",
		detailMobileHtml: "",
		detailTitle: "",
		feightTemplateId: 0,
		flashPromotionCount: 0,
		flashPromotionId: 0,
		flashprice: 0,
		flashPromotionSort: 0,
		giftPoint: 0,
		giftGrowth: 0,
		keywords: "",
		lowStock: 0,
		name: "",
		newStatus: 0,
		note: "",
		original_price: 0,
		pic: "",
		//会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
		memberPriceList: [],
		//商品满减
		productFullReductionList: [{
			fullPrice: 0,
			reducePrice: 0
		}],
		//商品阶梯价格
		productLadderList: [{
			count: 0,
			discount: 0,
			price: 0
		}],
		// 快抢商品
		isQuick: 0,
		// 拼团价
		price: 0,
		// 可砍价  快抢商品补贴
		rewardPrice1: 0,
		// 砍价商品层级奖  快抢商品层级奖
		rewardPrice2: 0,
		// 市场价
		originalPrice: 0,
		productAttributeCategoryId: null,
		//商品属性相关{productAttributeId: 0, value: ''}
		productAttributeValueList: [],
		//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', sp1: '', sp2: '', sp3: '', stock: 0}
		skuStockList: [],
		//商品相关专题{subjectId: 0}
		subjectProductRelationList: [],
		//商品相关优选{prefrenceAreaId: 0}
		prefrenceAreaProductRelationList: [],
		productCategoryId: null,
		productCategoryName: "",
		areaId: null,
		areaName: "",
		productSn: "",
		promotionEndTime: "",
		promotionPerLimit: 0,
		price: 0,
		promotionStartTime: "",
		promotionType: 0,
		storeClassId: null,
		publishStatus: 0,
		// super商品
		isFenxiao: 0,
		// 砍价商品
		isBargain: 0,
		recommandStatus: 0,
		sale: 0,
		serviceIds: "",
		sort: 0,
		// 库存 总仓
		stock: 0,
		subTitle: "",
		unit: "",
		usePointLimit: 0,
		verifyStatus: 0,
		transfee: 0,
		weight: 0
	};
	export default {
		name: "ProductDetail",
		components: {
			ProductInfoDetail,
			ProductSaleDetail,
			ProductAttrDetail,
			ProductRelationDetail
		},
		props: {
			// 编辑商品传入的isEdit是true
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				active: 0,
				productParam: Object.assign({}, defaultProductParam),
				showStatus: [true, false, false, false]
			};
		},
		created() {
			if (this.isEdit) {
				getProduct(this.$route.query.id).then(response => {
					this.productParam = response.data;
				});
			}
		},
		methods: {
			hideAll() {
				for (let i = 0; i < this.showStatus.length; i++) {
					this.showStatus[i] = false;
				}
			},
			prevStep() {
				if (this.active > 0 && this.active < this.showStatus.length) {
					this.active--;
					this.hideAll();
					this.showStatus[this.active] = true;
				}
			},
			nextStep() {
				if (this.active < this.showStatus.length - 1) {
					this.active++;
					// 让所有组件隐藏
					this.hideAll();
					// 让下一个组件显示
					this.showStatus[this.active] = true;
				}
			},
			finishCommit(isEdit) {
				// 提交商品携带的参数
				console.log(this.productParam);
				if (this.productParam.tagList) {
					this.productParam.tags = this.productParam.tagList.join(",");
					this.productParam.tagList = null;
				}

				this.$confirm("是否要提交该产品", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					// isEdit =true 修改商品   false 添加商品
					if (isEdit) {
						updateProduct(this.$route.query.id, this.productParam).then(
							response => {
								this.$message({
									type: "success",
									message: "提交成功",
									duration: 1000
								});
								// 返回上一级
								// this.$router.back();
							}
						);
					} else {
						createProduct(this.productParam).then(response => {
							this.$message({
								type: "success",
								message: "提交成功",
								duration: 1000
							});
							// 重新加载
							// location.reload();
						});
					}
				});
			}
		}
	};
</script>
<style>
	.form-container {
		width: 800px;
	}
</style>
